<template>
  <div class="user-select-dlg">
    <van-nav-bar class="header"
      title="用户选择"
      left-arrow
      @click-left="onBack()"
    >
      <template #left>
        <van-icon name="arrow-left" size="18" color="#3B3938" />
      </template>
    </van-nav-bar>
    <online-filter-box style="background: white; padding: 0px 18px;"
      @reset="onReset()"
      @refresh="refreshUser"
    >
      <!-- 过滤字段 -->
      <van-row>
        <van-search-filter label="用户名称" v-model="formFilter.sysUserLoginName" />
      </van-row>
    </online-filter-box>
    <CustomList ref="cardList"
      style="padding: 0px 16px; flex-grow: 1;"
      :loadData="loadTableData"
    >
      <!-- 用户列表卡片 -->
      <div class="user-item" slot-scope="scope" @click="onSelectChange(scope.data, !isSelect(scope.data))">
        <div class="text" style="color: #333333; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px;">
          {{ scope.data.showName }}
        </div>
        <div class="text">
          用户名：{{ scope.data.loginName }}
        </div>
        <div class="text">
          所属部门：{{ (scope.data.deptIdDictMap || {}).name }}
        </div>
        <van-checkbox class="select"
          shape="square" icon-size="16px"
          :value="isSelect(scope.data)"
          @input="(val) => onSelectChange(scope.data, val)"
        />
      </div>
    </CustomList>
    <van-row class="menu-box" type="flex" justify="space-between" align="center">
      <van-button size="normal" style="width: 104px; height: 40px;" @click="onBack()">取消</van-button>
      <van-button size="normal" style="width: 100%; margin-left: 8px; height: 40px;" color="#FF7700" @click="onSubmit()">保存</van-button>
    </van-row>
  </div>
</template>

<script>
import CustomList from '@/components/CustomList.vue';
import { SysCommonBizController } from '@/api';

export default {
  name: 'userSelectDlg',
  props: {
    value: {
      type: [Number, String, Array]
    },
    multiple: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: 'userId'
    },
    filterObject: {
      type: Object
    }
  },
  components: {
    CustomList
  },
  data () {
    return {
      selectAll: false,
      selectItems: [],
      formFilter: {
        sysUserLoginName: undefined
      }
    }
  },
  methods: {
    onReset () {
      this.formFilter.sysUserLoginName = undefined;
      this.refreshUser();
    },
    refreshUser () {
      if (this.$refs.cardList) this.$refs.cardList.reset();
    },
    loadTableData (pageNum) {
      let params = {
        widgetType: 'upms_user',
        pageParam: {
          pageNum: pageNum,
          pageSize: 20,
          count: false
        },
        filter: {
          ...this.filterObject,
          loginName: this.formFilter.sysUserLoginName
        }
      }
      return new Promise((resolve, reject) => {
        SysCommonBizController.list(this, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: res.data.totalCount
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    isSelect (data) {
      if (data == null) return false;
      return this.selectItems.indexOf(data[this.rowKey]) !== -1;
    },
    onSelectChange (data, val) {
      if (data == null || data[this.rowKey] == null) return;
      if (val) {
        if (this.selectItems.indexOf(data[this.rowKey]) === -1) {
          if (this.multiple) {
            this.selectItems.push(data[this.rowKey]);
          } else {
            this.selectItems = [data[this.rowKey]];
          }
        }
      } else {
        this.selectItems = this.selectItems.filter(item => {
          return item !== data[this.rowKey];
        });
      }
    },
    onBack () {
      this.reset();
      this.$emit('close');
    },
    onSubmit () {
      this.$emit('input', this.selectItems);
      this.$emit('change', this.selectItems);
      this.onBack();
    },
    reset () {
      if (this.multiple) {
        this.selectItems = Array.isArray(this.value) ? [...this.value] : [];
      } else {
        this.selectItems = Array.isArray(this.value) ? [...this.value] : (this.value == null ? [] : [this.value]);
      }
    }
  },
  watch: {
    value: {
      handler () {
        this.reset();
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
  .user-select-dlg {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #F6F7F9;
  }
  .menu-box {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 16px;
    flex-wrap: nowrap;
    background: white;
    box-sizing: border-box;
  }

  .user-item {
    background: white;
    border-radius: 4px;
    padding: 15px 28px;
    position: relative;
  }
  .user-item + .user-item {
    margin-top: 16px;
  }
  .select {
    position: absolute;
    left: 8px;
    top: 8px;
  }
  .user-item .text {
    color: #666666;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }
  .user-item >>> .van-icon-success:before {
    position: absolute;
    left: 0px;
    top: -3px;
  }
</style>
